<template>
    <van-nav-bar title="我的" placeholder fixed />
    <div class="user-info">
        <van-image round width="8rem" height="8rem" fit="cover" position="left"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <span class="nickname" @click="show = true">昵称：{{ userData.username }}</span>
        <van-dialog v-model:show="show" title="修改昵称" show-cancel-button @confirm="changeNickname">
            <van-cell-group inset>
                <van-field v-model="value" label="昵称" placeholder="请输入修改后的昵称" />
            </van-cell-group>

        </van-dialog>
    </div>
    <van-cell-group>
        <van-cell title="服务" is-link icon="passed" />
        <van-cell title="收藏" is-link icon="medal-o" />
        <van-cell title="朋友圈" is-link icon="photo-o" />
        <van-cell title="卡包" is-link icon="credit-pay" />
        <van-cell title="表情" is-link icon="smile-o" />
        <!-- <van-cell title="设置" is-link icon="setting-o" /> -->
        <van-cell title="修改密码" is-link to="/updatepwd" icon="edit" />
    </van-cell-group>
    <van-tabbar v-model="active" route placeholder fixed>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { bindUserNameReq, getUserInfoReq } from '@/api/user';
import { cartArr } from '@/store/cart';
// import axios from 'axios'
import { ref } from 'vue';
let show = ref(false);
let active = ref(0);
let userData = ref([]);
let value = ref('');
let userid = localStorage.getItem('userid');
// let token = localStorage.getItem('token');
getUserData();
// 获取用户信息
async function getUserData() {
    // let r = await axios.get("http://localhost:3001/api/user/info", { params: { userid }, headers: { token } });
    getUserInfoReq(userid).then((r) => {
        console.log(r.data);
        if (r.data.code == 200) {
            userData.value = r.data.data[0];
        }
    })

}
// 修改昵称
async function changeNickname() {
    console.log(value.value);
    // await axios.get("http://localhost:3001/api/user/bindusername", { params: { userid, username: value.value }, headers: { token } });
    bindUserNameReq(userid, value.value)
    getUserData();
}
</script>

<style scoped>
.user-info {
    padding-top: 10px;
    display: flex;
    align-items: center;
}

.nickname {
    margin-left: 50px;
}
</style>